<template>
	<view>
		<!-- 预算汇总 -->
		<view class="head_tb">
			<u-tabs :scrollable='false' :lineWidth='40'
			 :activeStyle="{
			 			 fontSize:'32rpx',
			 			 color: '#007aff'
			          }" :inactiveStyle="{
			 			 fontSize:'30rpx'
			          }"
			 itemStyle='width:50%;height:80rpx' :list="list1"
				 @click="checkbtn"></u-tabs>
		</view>
		

		<!-- 基本信息 -->
		<view class="msp">
			<CellChild :addlist='addlist' :rows='rows' title='基本信息' :fileNo = 'fileNo' isshow='true' id='add_one'>
			</CellChild>
		</view>
		
		<!-- 预算明细 -->
		<!-- <view class="formcard" id="add_two">
			<view class="bodtitle">
				<p><b>预算明细</b></p>
			</view>
			<view v-for="(item,index) in subEntityList">
				<Expandlist :cellshows='cellshow' :arrcell='item' :celllist='celllist' :title='item.subdeptId + item.subdeptNm'>
					<template #text>
						<p class='solts'><label class="solts_label"><label style='font-size: 18rpx;color: #999999;'>合计金额</label>￥</label><span class="solts_span" v-money>{{item.totalAmt}}</span></p>
					</template>
				</Expandlist>
			</view>
		</view> -->
				
		<!-- 明细 -->
		<view class="formcard" id="conts">
			<view class="bodtitle" style="border-bottom: none;padding-left: 40rpx;">
				<p><b>明细</b></p>
			</view>

			<!-- <view class="radius">
				<view class="radius_ds">
					<p @click='isActive=true' :class="isActive ? 'radius_active' : 'radiusactive'">按预算项</p>
					<p @click='isActive=false' :class="isActive ? 'radiusactive' : 'radius_active'">按部门</p>
				</view>
			</view> -->
			<!-- <Cell :sum='sum' :deptEntityList='deptEntityList' v-show="isActive" /> -->
			<view  class="dissetion">
						<view class="disleft">
							<ul>
								<li class='setli' v-for="(item,index) in deptEntityList" :class="{'settion_active':isActive}"
									:style="{color: [item.state != true ? 'black' : 'rgb(0,122,255)'],background: [item.state != true ? 'white' : 'rgb(247,251,255)']}"
									@click='settbs(item,index)'>
									<p>{{item.deptNm}}</p>
								</li>
							</ul>
						</view>
						<view class="disright">
							<view class="disflex">
								<p>{{setionlist.yystit}}</p>
								<p>{{arrlist.peopleTotal}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.jbtit}}</p>
								<p>{{arrlist.workTime}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.zgstit}}</p>
								<p>{{arrlist.workHours}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.yysrtit}}</p>
								<p>{{commonApi.formatAmt(arrlist.businessIncome)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.yycbtit}}</p>
								<p>{{commonApi.formatAmt(arrlist.businessCost)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.rlcbtit}}</p>
								<p>{{commonApi.formatAmt(arrlist.laborCost)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.zzfytit}}</p>
								<p>{{commonApi.formatAmt(arrlist.makeCost)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.glfytit}}</p>
								<p>{{commonApi.formatAmt(arrlist.manaCost)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.xsfytit}}</p>
								<p>{{commonApi.formatAmt(arrlist.saleCost)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.tztit}}</p>
								<p>{{commonApi.formatAmt(arrlist.investExamineAmt)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.yysjjfj}}</p>
								<p>{{commonApi.formatAmt(arrlist.salesTax)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.yywcwfy}}</p>
								<p>{{commonApi.formatAmt(arrlist.financialAmt)}}</p>
							</view>
							<view class="disflex">
								<p>{{setionlist.yysjtit}}</p>
								<p>{{commonApi.formatAmt(arrlist.profitAmt)}}</p>
							</view>
							<p class='cellbot' v-for="(item,index) in deptEntityList" @click='gtode'>查看{{item.deptNm}}费用明细</p>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Cell from '../../views/Workflow/cell.vue'
	import liveexpand from '../../tools/liveExpand.vue'
	export default {
		components: {
			Cell,
			liveexpand
		},
		data() {
			return {
				list1: [{
						name: '基本信息'
					},
					{
						name: '预算汇总'
					}
				],
				isActive: true,
				deptEntityList:[],
				sum:{
					sumbusinessIncome:0,
					sumbusinessCost:0,
					sumlaborCost:0,//人工成本
					sumsalesTax:0,//营业税金及附加
					sumfinancialAmt:0,//财务外费用
					summakeCost:0,//制造费
					summanaCost:0,//管理费
					sumsaleCost:0,//销售费
					suminvestExamineAmt:0,//投资审议金额
					sumprofitAmt:0,//利润总额
				},
				cellshow:false,
				tabPosition: 'left',
				setionlist: {
						yystit: '要员数',
						jbtit: '加班',
						zgstit: '总工时',
						yysrtit: '营业收入',
						yycbtit: '营业成本',
						rlcbtit: '人力成本',
						zzfytit: '制造费用',
						glfytit: '管理费用',
						xsfytit: '销售费用',
						tztit: '投资',
						yysjjfj:'营业税金及附加',
						yywcwfy:'营业外财务费用',
						yysjtit: '利润总额',
				},
				isActive: true,
				arrlist:[],
				subEntityList:[],
				addlist:[
					{tit:'单据编号',val:'billNo'},
					{tit:'预算年度',val:'budgetYear'},
					{tit:'申请人',val:'userName'},
					{tit:'工号',val:'creator'},
					{tit:'整车质量',val:'carYield'},
					{tit:'公司销量',val:'salesVolume'},
				],
				celllist:[
					{tit:'预算年度',val:'budgetYear'},
					{tit:'部门',val:'deptNo'},
					{tit:'科室',val:'subdeptNm'},
					{tit:'科室编码',val:'subdeptId'},
					{tit:'预算合计',val:'totalAmt',type:'number'},
				],
				rows:[],
				fileNo:[]
			}
		},
		onLoad() {
			//获取流程页面的流程上下文[实用的流程信息从这里获取]
			 let billNo= window.parent.myvm.wfContext.BusinessKey;
			 this.fileNo =  window.parent.myvm.wfContext.BusinessKey;
			 this.getlist('billNo')
		},
		mounted() {
			var that = this;
			window.myvm = that;
			window.$urlFormVue = that;
		},
		methods: {
			getlist(billNo){
				let _this = this
				let params = {
					billNo
				}
				_this.$lyRequest.post('/gateway/budget/mp/dbsap/budget/importMainEntity/queryBillInfo.do',
					params,'form'
				).then((result)=>{
					if(result.success){
						this.rows = result.data.rows
						this.subEntityList = result.data.rows.subEntityList
						this.deptEntityList = result.data.rows.deptEntityList
						this.arrlist = result.data.rows.deptEntityList[0]
						this.releseaList()
						this.settbs(result.data.rows.deptEntityList[0])
					}else{
						console.log(result.data.msg)
					}
				})
			},
			releseaList(){
				this.deptEntityList.forEach((item,index,value) => {
					this.sum.sumbusinessIncome += item.businessIncome //营业收入
					this.sum.sumbusinessCost += item.businessCost //营业成本
					this.sum.sumlaborCost += item.laborCost //人工成本
					this.sum.sumsalesTax += item.salesTax //营业税金及附加
					this.sum.sumfinancialAmt += item.financialAmt //财务外费用
					this.sum.summakeCost += item.makeCost//制造费
					this.sum.summanaCost += item.manaCost //管理费
					this.sum.sumsaleCost += item.saleCost //销售费
					this.sum.suminvestExamineAmt += item.investExamineAmt //投资审议金额
					this.sum.sumprofitAmt += item.profitAmt//利润总额
				})
				this.sum.sumbusinessIncome = this.commonApi.formatAmt(this.sum.sumbusinessIncome)
				this.sum.sumbusinessCost = this.commonApi.formatAmt(this.sum.sumbusinessCost)
				this.sum.sumlaborCost =this.commonApi.formatAmt(this.sum.sumlaborCost)
				this.sum.sumsalesTax =this.commonApi.formatAmt(this.sum.sumsalesTax)
				this.sum.sumfinancialAmt =this.commonApi.formatAmt(this.sum.sumfinancialAmt)
				this.sum.summakeCost =this.commonApi.formatAmt(this.sum.summakeCost)
				this.sum.summanaCost =this.commonApi.formatAmt(this.sum.summanaCost)
				this.sum.sumsaleCost =this.commonApi.formatAmt(this.sum.sumsaleCost)
				this.sum.suminvestExamineAmt =this.commonApi.formatAmt(this.sum.suminvestExamineAmt)
				this.sum.sumprofitAmt =this.commonApi.formatAmt(this.sum.sumprofitAmt)
				this.sum.sumsaleCost =this.commonApi.formatAmt(this.sum.sumsaleCost)
			},
			settbs(item, index) {
				this.deptEntityList.forEach((item,index,value) => {
					Object.assign(item,{'state':false})
					value.state = false
				})
				item.state = true
				this.arrlist = item
			},
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//转办-工作流点击"确认转办"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//opinion:转办意见
			referredWorkflow(opinion) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef,callback) {
				callback("");
			},
			//提交单据
			sendWorkflow(btnDef, callback) {
				callback("");
			},
			radiusactive() {
				this.isActive = true
				console.log(1)
			},
			radiusdactive() {
				this.isActive = false
				console.log(11)
			},
			// 滚动
			checkbtn(item) {
				if (item.name == '基本信息') {
					this.commonApi.goAnchor('add_one')
				} else {
					this.commonApi.goAnchor('conts')
				}

			},
			gtode(){
				uni.navigateTo({
					url:'./department?god='+encodeURIComponent(JSON.stringify(this.rows))
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		font-family: pf
	}

	.textarea {
		display: flex;
		flex-direction: column;

		p {
			padding-left: 30rpx;
			margin-top: 20rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.gup {
			margin: 50rpx 0;
			padding-left: 30rpx;
			margin-top: 20rpx;
		}
	}

	.radius {
		width: 80%;
		height: 80rpx;
		// border: 1px solid #ccc;
		border-radius: 50px;
		margin: 20rpx auto;
		z-index:1;
		.radius_ds {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border: 1px solid #c7c7c7;
			border-radius: 50px;
			position: relative;
			z-index:1;
			p {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				width: 50%;
			}

			.radius_active {
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border: 1px solid blue;
				border-radius: 50px;
			}
		}
	}

	.bus {
		display: flex;
		flex-direction: row;
		align-items: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}

		p {
			font-size: 30rpx;
		}
	}

	.bod_cost {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.bodcolor {
		span {
			color: #ff6400;
			font-size: 32rpx;
			padding-right: 20rpx;
		}

		label {
			color: #ff6400;
		}
	}

	.bodtitle {
		padding-left: 20rpx;
	}

	.bottom_setup {
		width: 100%;
		background-color: white;
		box-shadow: 5px -10rpx 5px 0px rgba(225, 225, 225, .4), ;

		.bottom_white {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 150rpx;

			.custom-styles {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
			}

			.custom-style {
				padding: 20rpx 30rpx;
				width: 300rpx;
				height: 100rpx;
				background-color: #007aff;
			}
		}
	}

	.pdlfs {
		width: 470rpx;
		text-align: right;
	}

	.tbs {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.dissetion {
		display: flex;
		flex-direction: row;
	
		.disleft {
			flex: 3
		}
	
		.disright {
			flex: 6;
			background-color: rgb(247, 251, 255);
		}
	}
	
	.setli {
		width: 100%;
		padding: 35rpx 20rpx;
		font-size: 32rpx;
		color: rgb(121, 121, 121);
		box-sizing: border-box;
	}
	
	.disflex {
		padding: 30rpx 30rpx;
		font-size: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.cellbot {
		color: rgb(76, 161, 255);
		text-align: right;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		padding-right: 20rpx;
	}
	
	.settion_active {
		color: red;
	}
</style>
